<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>收集表单数据</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <form @submit.prevent="handleSubmit">

            账号：<input v-model="userInfo.account" type="text"> <br><br>
            密码：<input v-model="userInfo.password" type="password"> <br><br>
            年龄：<input v-model.number="userInfo.age" type="number"> <br><br>

            性别：
            <input v-model="userInfo.gender" type="radio" name="gender" value="male"> 男
            <input v-model="userInfo.gender" type="radio" name="gender" value="female"> 女

            <br><br>
            
            爱好：
            <input v-model="userInfo.hobby" type="checkbox" name="hobby" value="sing"> 唱
            <input v-model="userInfo.hobby" type="checkbox" name="hobby" value="dance"> 跳
            <input v-model="userInfo.hobby" type="checkbox" name="hobby" value="rap"> Rap
            <input v-model="userInfo.hobby" type="checkbox" name="hobby" value="basketball"> 篮球

            <br><br>
            
            所属校区：
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select>

            <br><br>

            其他信息：<textarea v-model.lazy="userInfo.other"></textarea>

            <br><br>

            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>

            <br><br>

            <button>submit</button>
        </form>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                userInfo: {
                    account: '',
                    password: '',
                    age: 18,
                    gender: 'female',
                    hobby: [],
                    city: 'beijing',
                    other: '',
                    agree: ''
                }
            },
            methods: {
                handleSubmit() {
                    console.log('this.userInfo:', this.userInfo)
                }
            }
        })
    </script>
</body>
</html>